window.addEventListener('load', function () {
  /* 
 轮播图功能  
     1. 自动轮播
     2. 点击按钮，播放下一张
     3. 点击小圆圈，切换指定图片
     4. 鼠标进入，停止轮播，离开，开启轮播
*/
  let focus = document.querySelector('.focus');
  let arrowL = document.querySelector('.arrow-l');
  let arrowR = document.querySelector('.arrow-r');

  //  1. 鼠标进入/离开，按钮的显示和隐藏 
  focus.addEventListener("mouseover", function () {
    arrowL.style.display = 'block'
    arrowR.style.display = 'block'
    //  停止定时器 
    clearInterval(timer)
  });
  focus.addEventListener('mouseleave', function () {
    arrowL.style.display = 'none'
    arrowR.style.display = 'none'
    //  开启定时器
    timer = setInterval(() => {
      arrowR.click() // 手动点击右侧按钮
    }, 1000);
  });


  // 2. 动态生成小圆圈 
  let ul = document.querySelector("ul");
  let ol = document.querySelector("ol");
  let lis = ul.querySelectorAll("li");

  for (let i = 0; i < lis.length - 1; i++) {
    let li = document.createElement("li"); // createElement  创建元素
    li.setAttribute('index', i); // 添加索引号  setAttribute (设置属性)
    ol.appendChild(li); // appendChild  添加元素
    // getAttribute  获取元素
  }

  ol.children[0].className = "current"; // current  默认


  //  3. 点击小圆圈 ， 改变样式 
  let lis1 = ol.querySelectorAll('li')
  let width = focus.offsetWidth;
  for (let i = 0; i < lis1.length; i++) {
    //  循环添加点击事件
    lis1[i].addEventListener('click', function () {
      // 清除所有样式
      for (let j = 0; j < lis1.length; j++) {
        lis1[j].className = '';
      };
      //  当前元素添加样式
      this.className = 'current'


      /* 
        4. 点击小圆圈， 移动图片 （移动ul   不是li）
           小圆圈         移动距离
           0                0
           1                1*width
           2                2*width
           3                3*width
      */
      let index = this.getAttribute('index')
      animate(ul, -index * width)
      // 8 同步  num  与 index  
      num = index;
    });
  };


  // 5. 点击播放下一张图片，  
  let num = 0; // 点击的计数器
  arrowR.addEventListener('click', function () {
    if (num == 4) {
      num = 0;
      ul.style.left = 0 + 'px';
    }
    num++;

    animate(ul, -num * width)


    // arrowL.addEventListener('click', function () {
    //   if (num == 0) {
    //     num = 4;
    //     ul.style.left = -nume * width + 'px';
    //   }
    //   num--;

    //   animate(ul, num * width)
    //   for (let j = 0; j < lis1.length; j++) {
    //     lis1[j].className = '';
    //   };
    //   if (num >= 0) {
    //     lis1[num].className = 'current'
    //   } else {
    //     ol.lastElementChild.className = 'current'
    //   }
    // });


    // 7 . 点击右侧按钮， 小圆圈样式同步变化 
    for (let j = 0; j < lis1.length; j++) {
      lis1[j].className = '';
    };
    if (num < 4) {
      lis1[num].className = 'current'
    } else {
      lis1[0].className = 'current'
    }
  });




  //  6.  克隆第一张图片 
  // let first = ul.children[0].cloneNode(true);
  // ul.appendChild(first);



  // 9.自动轮播 
  let timer = setInterval(() => {
    arrowR.click() // 手动点击右侧按钮
  }, 1000);
});